<br>
<clr-tabs clrLayout="vertical" [clrLoading]="loading">
    <clr-tab>
        <button clrTabLink (click)="changeTab('WORK_WEIXIN')">{{'APP_WORK_WEIXIN_TAB'|translate}}</button>
        <clr-tab-content *clrIfActive>
            <form clrForm #wechatForm="ngForm">
                <clr-input-container>
                    <label>corpid</label>
                    <input clrInput type="password" name="weixin_corp_id" [(ngModel)]="item.vars['WORK_WEIXIN_CORP_ID']" size=45
                           required/>
                </clr-input-container>
                <clr-input-container>
                    <label>agentid</label>
                    <input clrInput name="weixin_agentid" [(ngModel)]="item.vars['WORK_WEIXIN_AGENT_ID']" size=45 required/>
                </clr-input-container>
                <clr-input-container>
                    <label>secret</label>
                    <input clrInput type="password" name="weixin_secret" [(ngModel)]="item.vars['WORK_WEIXIN_CORP_SECRET']" size=45
                           required/>
                </clr-input-container>
                <clr-input-container>
                    <label>{{'APP_WORK_WEIXIN_USER'|translate}}</label>
                    <input clrInput name="weixin_test" [(ngModel)]="item.vars['WORK_WEIXIN_TEST_USER']" size=45/>
                    <clr-control-helper>{{'APP_WORK_WEIXIN_USER_HELPER'|translate}}</clr-control-helper>
                </clr-input-container>
                <clr-select-container>
                    <label>{{'APP_SMTP_STATUS'|translate}}</label>
                    <select class="input-width" clrSelect name="status" [(ngModel)]="item.vars['WORK_WEIXIN_STATUS']"
                            required>
                        <option value="ENABLE">{{'APP_ENABLE'|translate}}</option>
                        <option value="DISABLE">{{'APP_DISABLE'|translate}}</option>
                    </select>
                </clr-select-container>
            </form>
            <p class="p7 prompt"><a href="https://work.weixin.qq.com/api/doc/90000/90135/90665"
                                    target="_blank">{{'APP_WORK_WEIXIN_BASE'|translate}}</a>
            </p>
            <p class="p7 prompt"><a href="https://work.weixin.qq.com/api/doc/90000/90139/90312"
                                    target="_blank">{{'APP_WORK_WEIXIN_ROLE'|translate}}</a>
            </p>
            <p class="p7 prompt">{{'APP_WORK_WEIXIN_DESC'|translate}}</p><br>
            <button class="btn btn-success-outline" [disabled]="wechatForm.invalid" (click)="checkValid('WORK_WEIXIN')">
                {{'APP_SMTP_CHECK'|translate}}
            </button>
            <button class="btn btn-info-outline" (click)="onSubmit(item,'WORK_WEIXIN')"
                    [disabled]="wechatForm.invalid || !valid">
                {{'APP_COMMIT'|translate}}
            </button>
        </clr-tab-content>
    </clr-tab>
    <clr-tab>
        <button clrTabLink  (click)="changeTab('DING_TALK')">{{'APP_DING_TALK'|translate}}</button>
        <clr-tab-content *clrIfActive>
            <form clrForm #dingTalkForm="ngForm">
                <clr-input-container>
                    <label>{{'APP_DING_TALK_WEBHOOK'|translate}}</label>
                    <input clrInput name="dingtalk_webhook" [(ngModel)]="item.vars['DING_TALK_WEBHOOK']" size=100
                           required/>
                </clr-input-container>
                <clr-input-container>
                    <label>secret</label>
                    <input clrInput type="password" name="dingtalk_secret" [(ngModel)]="item.vars['DING_TALK_SECRET']" size=100
                           required/>
                </clr-input-container>
                <clr-input-container>
                    <label>{{'APP_WORK_WEIXIN_USER'|translate}}</label>
                    <input clrInput name="dingtalk_test" [(ngModel)]="item.vars['DING_TALK_TEST_USER']" size=45 required/>
                    <clr-control-helper>{{'APP_WORK_WEIXIN_USER_HELPER'|translate}}</clr-control-helper>
                </clr-input-container>
                <clr-select-container>
                    <label>{{'APP_SMTP_STATUS'|translate}}</label>
                    <select class="input-width" clrSelect name="status" [(ngModel)]="item.vars['DING_TALK_STATUS']"
                            required>
                        <option value="ENABLE">{{'APP_ENABLE'|translate}}</option>
                        <option value="DISABLE">{{'APP_DISABLE'|translate}}</option>
                    </select>
                </clr-select-container>
            </form>
            <p class="p7 prompt"><a href="https://ding-doc.dingtalk.com/doc#/serverapi2/qf2nxq/26eaddd5"
                                    target="_blank">{{'APP_DING_TALK_BASE'|translate}}</a>
            </p>
            <p class="p7 prompt"><a href="https://ding-doc.dingtalk.com/doc#/faquestions/eovtrt"
                                    target="_blank">{{'APP_DING_TALK_ROLE'|translate}}</a>
            </p>
            <p class="p7 prompt">{{'APP_WORK_WEIXIN_DESC'|translate}}</p><br>
            <button class="btn btn-success-outline" [disabled]="dingTalkForm.invalid" (click)="checkValid('DING_TALK')">
                {{'APP_SMTP_CHECK'|translate}}
            </button>
            <button class="btn btn-info-outline" (click)="onSubmit(item,'DING_TALK')"
                    [disabled]="dingTalkForm.invalid || !valid">
                {{'APP_COMMIT'|translate}}
            </button>
        </clr-tab-content>
    </clr-tab>
</clr-tabs>

